<template>
	<view class="login-page">
		<view class="detail-item" v-if="type==2 && userinfo.email">
			<view class="item-title">
				邮箱账号
			</view>
			<view class="special">
				<view>
					<u--input inputAlign="right" :readonly="true" placeholderStyle="textAlign:'right'"
						placeholder="请输入验证码" border="none" v-model="userinfo.email"></u--input>
				</view>
				<view class="code-btn" @tap="getCodes">
					{{codeContent}}
				</view>
			</view>
		</view>
		<view class="detail-item" v-if="type == 1 && userinfo.mobile">
			<view class="item-title">
				手机号
			</view>
			<view class="special">
				<view>
					<u--input inputAlign="right" :readonly="true" placeholderStyle="textAlign:'right'"
						placeholder="请输入验证码" border="none" v-model="userinfo.mobile"></u--input>
				</view>
				<view class="code-btn" @tap="getCodes">
					{{codeContent}}
				</view>
			</view>
		</view>
		<view class="detail-item">
			<view class="item-title">
				验证码
			</view>
			<view>
				<u--input inputAlign="right" placeholderStyle="textAlign:'right'" placeholder="请输入验证码" border="none"
					v-model="code"></u--input>
			</view>
		</view>
		<view class="detail-item">
			<view class="item-title">
				新密码
			</view>
			<view>
				<u--input inputAlign="right" placeholderStyle="textAlign:'right'" placeholder="请输入新密码" border="none"
					v-model="password"></u--input>
			</view>
		</view>
		<view class="detail-item">
			<view class="item-title">
				确认新密码
			</view>
			<view>
				<u--input inputAlign="right" placeholderStyle="textAlign:'right'" placeholder="请确认新密码" border="none"
					v-model="newpassword"></u--input>
			</view>
		</view>
		<view class="test">
			<view class="test-item">
				<u-icon v-if="!hasMinLength" name="close-circle-fill" color="#000000" size="21"></u-icon>
				<u-icon v-else name="checkmark-circle-fill" color="#000000" size="21"></u-icon>
				<view class="item-text">
					至少有 8 个字符
				</view>
			</view>
			<view class="test-item">
				<u-icon v-if="!hasUpperCaseOrSymbol" name="close-circle-fill" color="#000000" size="21"></u-icon>
				<u-icon v-else name="checkmark-circle-fill" color="#000000" size="21"></u-icon>
				<view class="item-text">
					有一个大写字母或符号
				</view>
			</view>
			<view class="test-item">
				<u-icon v-if="!hasNumber" name="close-circle-fill" color="#000000" size="21"></u-icon>
				<u-icon v-else name="checkmark-circle-fill" color="#000000" size="21"></u-icon>
				<view class="item-text">
					包含数字
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button shape="circle" @click="checkPassword" size="large" color="#333333" type="primary"
				text="确认修改"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				password: '',
				newpassword: '',
				userinfo: {},
				type: 1,
				codeContent: '获取验证码',
			}
		},
		computed: {
			hasMinLength() {
				return this.newpassword.length >= 8;
			},
			hasUpperCaseOrSymbol() {
				return /[A-Z!@#$%^&*()_+]/.test(this.newpassword);
			},
			hasNumber() {
				return /\d/.test(this.newpassword);
			},
		},
		onLoad() {
			this.postinfo()
		},
		methods: {
			checkPassword() {
				if (this.code == '') {
					uni.showToast({
						title: '验证码不能为空！',
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '新密码不能为空！',
						icon: 'none'
					})
					return
				}
				if (this.newpassword == '') {
					uni.showToast({
						title: '请再次输入新密码！',
						icon: 'none'
					})
					return
				}
				if (this.newpassword != this.password) {
					uni.showToast({
						title: '两次密码不一致！',
						icon: 'none'
					})
					return
				}
				// 检查密码是否符合条件
				const hasMinLength = this.password.length >= 8;
				const hasUpperCaseOrSymbol = /[A-Z!@#$%^&*()_+]/.test(this.password);
				const hasNumber = /\d/.test(this.password);

				// 设置状态和错误消息
				if (hasMinLength && hasUpperCaseOrSymbol && hasNumber) {
					uni.showLoading({
						mask: true
					})
					let params = {
						type: this.type == 1 ? 'mobile' : 'email',
						newpassword: this.newpassword,
						captcha: this.code
					}
					if (this.type == 1) {
						params.mobile = this.userinfo.mobile
					} else {
						params.email = this.userinfo.email
					}
					this.$Request({
						method: 'POST',
						data: params,
						url: '/user/resetpwd'
					}).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 1) {
							this.code = ''
							this.newpassword = ''
							this.password = ''
						}
					})
				} else {
					uni.showToast({
						title: '密码不符合要求！',
						icon: 'none'
					})
				}

			},
			// 发送验证码
			getCodes() {
				uni.showLoading({
					mask: true
				})
				if (this.type == 1) {
					let params = {
						mobile: this.userinfo.mobile,
						event: "resetpwd"
					}
					this.$Request({
						method: 'POST',
						data: params,
						url: '/sms/send'
					}).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 1) {
							let num = 60;
							if (this.codeContent == '获取验证码') {
								let timer
								timer = setInterval(() => {
									num--;
									if (num == 0) {
										this.codeContent = '获取验证码';
										clearInterval(timer)
									} else {
										this.codeContent = num + '秒';
									}
								}, 1000)
							}
						}
					})
				} else {
					let params = {
						email: this.userinfo.email,
						event: "resetpwd"
					}
					this.$Request({
						method: 'POST',
						data: params,
						url: '/ems/send'
					}).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 1) {
							let num = 60;
							if (this.codeContent == '获取验证码') {
								let timer
								timer = setInterval(() => {
									num--;
									if (num == 0) {
										this.codeContent = '获取验证码';
										clearInterval(timer)
									} else {
										this.codeContent = num + '秒';
									}
								}, 1000)
							}
						}
					})
				}

			},
			postinfo() {
				this.$Request({
					method: 'POST',
					url: '/user/getUserInfo'
				}).then(res => {
					if (res.data.code == 1) {
						this.userinfo = res.data.data
						if (this.userinfo.email == null) {
							this.type = 1
						} else {
							this.type = 2
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		padding: 30rpx;

		.detail-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f5f6fa;
			padding: 30rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 30rpx;

			.item-title {
				font-weight: 700;
			}

			.special {
				display: flex;
				align-items: center;

				.code-btn {
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #00bfff;
					padding: 15rpx 20rpx;
					border-radius: 20rpx;
				}
			}

			.type {
				display: flex;
				align-items: center;

				text {
					margin-right: 10rpx;
				}
			}
		}

		.btn {
			margin-top: 30rpx;
		}

		.test {
			font-size: 30rpx;
			color: #5c616f;
			margin-top: 20rpx;

			.test-item {
				display: flex;
				align-items: center;
				padding: 10rpx 0;

				.item-text {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>